// Created by lifei on 2020/7/21--9:19.
<template>
  <div class="card-box">
    <div class="card-title">
      <span>配套信息</span>
      <el-button-group>
        <el-button size="small" type="primary" @click="$refs.editMatchInfo.show()">添加</el-button>
      </el-button-group>
    </div>
    <div class="margin-box">
      <el-table :data="tableData" align="left">
        <el-table-column label="物业名称" prop="name" />
        <el-table-column label="物业大类" prop="type" />
        <el-table-column label="项目小类" prop="type2" />
        <el-table-column label="占地面积(m²)" prop="area" />
        <el-table-column label="建筑面积(m²)" prop="area2" />
        <el-table-column label="移交方式" prop="methods" />
        <el-table-column label="备注" prop="remark" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div class="flex-c">
              <el-button type="text" @click="$refs.editMatchInfo.show(scope.row)">编辑</el-button>

              <el-button type="text" @click="del(scope.row, scope.$index)">
                <span class="text-danger">删除</span>
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <editMatchInfo ref="editMatchInfo" @addData="addData" @updateData="updateData"></editMatchInfo>
  </div>
</template>

<script>
import editMatchInfo from './edit-match-info'

export default {
  name: "edit-match-info",
  components: { editMatchInfo },
  data () {
    return {
      dialogVisible: false,
      input: '',
      value: '',
      tableData: [
        {
          id: 123,
          name: '深业上城改造',
          type: '2',
          type2: '3',
          area: '123',
          area2: '456',
          methods: '4',
          remark: '备注信息',
        }
      ],
      area: [],
      form: {},
      lists: [
        {
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }
      ],
    }
  },
  mounted () {
  },
  methods: {
    addData (data) {
      this.tableData.push(data)
    },
    updateData (data) {
      let index = this.tableData.findIndex(i => i.id === data.id)
      this.tableData.splice(index, 1, data)
    },
    del (item, index) {
      this.$confirm(`您确定要删除 ${item.name} 吗？`, '删除确认', {
        type: 'warning'
      }).then(() => {
        this.tableData.splice(index, 1)
      }).catch(() => {

      })
    }
  }
}
</script>

<style scoped lang='scss'>
@include formWrap();
</style>
